<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<style type="text/css">
		/* 获取到 拥有 该属性的元素 */
		div[class^=font] { /*  class^=font 表示 font 开始位置就行了 */
			color: pink;
		}
		div[class$=footer] { /*  class$=footer 表示 footer 结束位置就行了 */
			color: skyblue;
		}
		div[class$=font] {
			color: orange;
		}
		div[class*=tao] { /* class*=tao  *=  表示tao 在任意位置都可以 */
			color: green;
			height: 200px;
			width: 100px;
			/* background-color: skyblue;
			background:rgba(0, 0, 0, 0.1); */
			background-image: url(images/2000949.jpg);
		}
		div.bg{
			height: 200px;
			width: 500px;
			background-color: red;
			background-image: url('images/2000949.jpg');
			/* background-size: 500px 200px; */
			background-size:contain;
		}

	</style>
</head>
<body>
	<div class="font12">属性选择器</div>
	<div class="font12">属性选择器</div>
	<div class="font24">属性选择器</div>
	<div class="font24">属性选择器</div>
	<div class="font24">属性选择器</div>
	<div class="24font">属性选择器123</div>
	<div class="sub-footer">属性选择器footer</div>
	<div class="jd-footer">属性选择器footer</div>
	<div class="news-tao-nav">属性选择器</div>
	<div class="news-tao-header">属性选择器</div>
	<div class="tao-header">属性选择器</div>
	<div class="bg">1</div>
</body>
</html>